<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>我的验证码验证码</title>
    <script type="text/javascript" src="../js/ajax.js"></script>
</head>
<body>

<form>
    <table border="0" align="center">
        <tr>
            <%--th 是表头--%>
            <th>验证码：</th>
            <td><input size="2" type="text" name="checkcode" id="checkcodeID" maxlength="4"/></td>
            <td><img src="../01_image.jsp"/>
            <td id="res"></td>
        </tr>
    </table>
</form>

<script type="text/javascript">
    //去掉二边的空格
    function trim(str){
        str = str.replace(/^\s*/,"");//"zhaojun  "
        str = str.replace(/\s*$/,"");//"zhaojun"
        return str;
    }
</script>

<script type="text/javascript">
    var td = document.getElementById("res");
    document.getElementById("checkcodeID").onkeyup = function () {
        var inputcode = this.value;
        inputcode = trim(inputcode);
        if(inputcode.length==4){
            //提交
            var ajax = createAJAX();
            var url = "${pageContext.request.contextPath}/checkcode?time="+new Date().getTime();
            ajax.open("POST",url);
            ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
            // 提交POST请求参数
            var content = "checkcode="+inputcode;
            ajax.send(content);

            ajax.onreadystatechange = function () {
                if(ajax.readyState==4){
                    if(ajax.status==200){
                        // 拿到返回值
                        var tip = ajax.responseText;
                        var img = document.createElement("img");
                        img.src=tip;
                        img.style.width="14px";
                        img.style.height="14px";
                        td.innerHTML = "";
                        td.appendChild(img);
                    }
                }
            }


        }else {
            td.innerHTML = "";
        }

    }
</script>

</body>
</html>
